<template>
  <div class="track_the_playback">
    <div class="aroundtop">
      <!-- 设置分组 -->
      <i class="el-icon-speed" title="区组">区组</i>
      <el-select
        v-model="CLIENT_NAME"
        placeholder="请选择区组"
        @change="groupchange"
      >
        <el-option
          v-for="(item, index) in groupingList"
          :value="item.CLIENT_NO"
          :label="item.CLIENT_NAME"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 设置道路 -->
      <!-- <i class="el-icon-speed" title="道路名称">道路名称</i>
      <el-select
        v-model="RoadName"
        placeholder="请选择道路"
        @change="$forceUpdate()"
        ref="RoadName"
      >
        <el-option
          v-for="(item, index) in roadList"
          :value="item.RoadName"
          :label="item.RoadName"
          :key="index"
        ></el-option>
      </el-select> -->
      <!-- 设置时间 -->
      <i class="el-icon-speed" title="时间">时间</i>
      <el-date-picker
        v-model="selectDay"
        type="date"
        placeholder="选择日"
        ref="historytime"
        @change="dataSearch"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      ></el-date-picker>

      <!-- 道路播放 -->
      <!-- <span class="buttonI" title="道路播放" @click="start">道路播放</span> -->
      <!-- 全区播放 -->
      <span class="buttonI" title="全区播放" @click="startAll">全区播放</span>
      <!-- 轨迹点数据 -->
      <span class="buttonI" title="轨迹点数据" @click="openDataList"
        >轨迹点数据</span
      >
      <!-- 图片导出 -->
      <span class="buttonI" title="图片导出" @click="savepic">图片导出</span>
      <span style="margin-left: 5px">
        <el-switch
          class="el-checkbox-show"
          v-model="showcarnamechecked"
          active-color="#13ce66"
        ></el-switch>
        <i
          class="el-icon-speed"
          title="是否显示作业人员姓名"
          style="margin-left: 10px"
          >是否显示作业人员姓名</i
        ></span
      >
      <!-- <div class="aroundtopdown"> -->
      <div class="aroundtopcontent">
        <!-- 设置道路 -->
        <i class="el-icon-speed" title="道路名称">道路名称：</i>
        <el-select
          v-model="RoadName"
          placeholder="请选择道路"
          @change="$forceUpdate()"
          ref="RoadName"
        >
          <el-option
            v-for="(item, index) in roadList"
            :value="item.RoadName"
            :label="item.RoadName"
            :key="index"
          ></el-option>
        </el-select>
        <!-- 道路播放 -->

        <span class="buttonII" title="道路播放" @click="start">道路播放</span>
        <!-- 轨迹偏移设置 -->
        <i class="el-icon-speed" title="轨迹偏移设置">轨迹偏移设置：</i>
        <el-checkbox class="el-checkbox-show" v-model="linevalue.grcheck"
          >道路</el-checkbox
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.grvalue"
        />
        <span
          style="
            color: #007acc;
            font-size: 15px;
            margin-right: 10px;
            font-weight: bold;
          "
          title="线粗"
          >线粗</span
        >
        <input
          class="input-number"
          style="width: 30px"
          v-model="linevalue.cxvalue"
        />
      </div>
    </div>
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="mapZZZ"></div>
    </div>
    <!-- 数据列表 -->
    <el-dialog
      title="点位数据列表"
      :visible.sync="dataListDialog"
      width="55%"
      class="dialogchild"
    >
      <el-form class="dialogform">
        <i class="el-icon-speed" title="人员姓名">人员姓名</i>
        <el-select
          v-model="LICENSE_PLATE"
          placeholder="请选择人员姓名"
          @change="carchange"
        >
          <el-option
            v-for="(item, index) in carList"
            :value="item.NAME"
            :label="item.NAME"
            :key="index"
          ></el-option>
        </el-select>
        <el-table
          :data="onecardataList"
          style="width: 150%"
          fit
          max-height="550"
          highlight-current-row
        >
          <!-- {"Lng":"117.449241907762","Lat":"38.8629691205361","Speed":"50","Direction":"西","GpsTime":"2020/12/21 9:16:47"}, -->
          <el-table-column
            prop="NAME"
            label="人员姓名"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="WorkerType"
            label="工人类型"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ORIENTATION_TIME"
            label="定位时间"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="NewLng"
            label="经度"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="NewLat"
            label="纬度"
            width="160"
            align="center"
          ></el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "@/common/js/date.js";

import MapStr from "@/main.js";
import DirectionImg from "@/assets/img/playback/direction.png";
import html2canvas from "html2canvas";
import { newMap } from "@/common/js/map.js";
export default {
  data() {
    return {
      setSlider: {
        max: 100,
        value: 0,
        step: 1,
      },
      Data: {
        arrayVillageRoad: [],
      },
      MapV: {
        roadLayer: null,
        roadNameLayer: null,
        dataSetWorkerLine: null,
      },
      map: null,
      // hshmap: new Map(),
      mapZoom: 20,
      markerWithSlider: null,
      dataListDialog: false,
      showcarnamechecked: false,
      hshmap: new Map(),
      dataList: [],
      dataCurrentIndex: 0,
      VID: 0,
      setTime: {},
      selectDay: formatDate(
        new Date(new Date() - 3600 * 1000 * 24),
        "yyyy-MM-dd"
      ),
      groupingList: [],
      carList: [],
      onecardataList: [],
      CLIENT_NAME: "",
      RoadName: "",
      LICENSE_PLATE: "",
      roadList: [],
      workerList: [],
      linevalue: {
        grvalue: 2,
        grcheck: true,
        cxvalue: 5,
      },
    };
  },
  created() {
    this.VID = this.$route.query.VID;
    // var now   = new Date();
    // now.setDate(now.getDate() - 1)
    // var monthn = now.getMonth()+1;
    // var yearn  = now.getFullYear();
    // var dayn = now.getDate();
    // this.selectDay = yearn+"-"+monthn+"-"+dayn;
    this.CLIENT_NAME = localStorage.getItem("CLIENT_NO");
  },
  mounted() {
    // 显示地图
    this.mapShow();
    this.getGroupingList();
    this.dataSearch();
    // this.getVillageRoadInfo()
  },
  methods: {
    dataSearch() {
      this.getRoadList(this.CLIENT_NAME);
      // this.getWorkerList(this.CLIENT_NAME);
    },
    groupchange(val) {
      this.RoadName = "";
      this.LICENSE_PLATE = "";
      this.getRoadList(val);
      // this.getWorkerList(val);
    },
    carchange(val) {
      this.onecardataList = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i][0].NAME == val) {
          this.onecardataList = this.onecardataList.concat(this.dataList[i]);
        }
      }
    },
    // 显示地图
    mapShow() {
      // 百度地图API功能
      this.map = newMap();
      this.map.centerAndZoom(
        new BMap.Point(
          localStorage.getItem("LNG"),
          localStorage.getItem("LAT")
        ),
        this.mapZoom
      ); // 初始化地图,设置中心点坐标和地图级别

      // var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), { anchor: new BMap.Size(20, 20) })
      // this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), { icon: myIcon })
      // this.markerWithSlider.disableMassClear()
      // this.map.addOverlay(this.markerWithSlider)
      const _this = this;
      // 缩放屏幕
      this.map.addEventListener("zoomend", function (e) {
        console.log("地图缩放至：" + this.getZoom() + "级");
        var lineWidth = 2;
        if (this.getZoom() > 16) {
          lineWidth = 3;
        }
        if (this.getZoom() < 15) {
          lineWidth = 1;
        }
        _this.MapV.roadLayer.update({
          options: {
            lineWidth: lineWidth,
          }, // 修改配置
        });

        if (this.getZoom() > 16) {
          _this.MapV.roadNameLayer.show();
        } else {
          _this.MapV.roadNameLayer.hide();
        }
      });
    },
    // 获得分组列表
    async getGroupingList() {
      var url =
        "DataListCompany/GetClientYX?ClientNo=" +
        localStorage.getItem("CLIENT_NO"); // zxdata
      let { data } = await this.$Http.get(url);
      this.groupingList = data;
      this.CLIENT_NAME = data[0].CLIENT_NO;
    },
    // 获得道路列表
    async getRoadList(val) {
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      var url =
        "RubbishVehicle/GetWorkerRoadHistoryForRoad?ClientNo=" +
        val +
        "&date=" +
        this.selectDay; // zxdata
      let { data } = await this.$Http.get(url);
      this.roadList = data;
      if (data.length) {
        this.RoadName = data[0].RoadName;
      } else {
        this.$message.warning("未查询到此区域道路");
      }
    },
    // 获得人员列表
    async getWorkerList(val) {
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      var url =
        "DataListCompany/GetRoadInfoYXName?ClientNo=" +
        val +
        "&WorkDate=" +
        this.selectDay; // zxdata
      let { data } = await this.$Http.get(url);
      this.workerList = data;
      if (data.length) {
        this.LICENSE_PLATE = data[0].LICENSE_PLATE;
      } else {
        this.$message.warning("未查询到此区域人员");
      }
    },
    // 选定时间,获取车辆数据列表
    async getcarDataList() {
      if (
        this.$refs.RoadName.value == null ||
        this.$refs.RoadName.value == "undefined"
      ) {
        this.$message.error("未选择道路");
        return;
      }
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        RoadName: this.$refs.RoadName.value,
        ClientNo: localStorage.getItem("CLIENT_NO"),
      };
      const { data } = await this.$Http.get(
        "DataListCompany/GetRoadWorkerInfo",
        { params }
      );
      if (data.length != 0) {
        this.carList = data;
      } else {
        this.$message.error("未获取到车辆");
      }
    },
    // 获取人员
    async getDataListWorker() {
      if (
        this.$refs.workername.value == null ||
        this.$refs.workername.value == "undefined"
      ) {
        this.$message.error("未选择人员");
        return;
      }
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        Name: this.$refs.workername.value,
        ClientNo: this.CLIENT_NAME,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get(
        "DataListCompany/GetCleanerRoadTrackGroupren",
        { params }
      );
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        this.drawPicture(18);
      } else {
        this.$message.error("未获取到轨迹");
      }
    },
    // 获取支路等农村道路坐标点
    async getVillageRoadInfo() {
      var url =
        "RubbishVehicle/getVillageRoadInfo?ClientNo=" +
        localStorage.getItem("CLIENT_NO") +
        "&teamName=&wokerName=";
      let { data } = await this.$Http.get(url);
      // eventBus.$emit('mapVillageRoadInfo', data)
      this.Data.arrayVillageRoad = data;
      this.drawRoad();
    },
    // 选定时间,获取道路轨迹数据列表
    async getDataList() {
      if (
        this.$refs.RoadName.value == null ||
        this.$refs.RoadName.value == "undefined"
      ) {
        this.$message.error("未选择道路");
        return;
      }
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        RoadName: this.$refs.RoadName.value,
        ClientNo: this.CLIENT_NAME,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get(
        "DataListCompany/GetCleanerRoadTrackGroup",
        { params }
      );
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        console.log("daolu", this.dataList);
        this.drawPicture(18);
      } else {
        this.$message.error("未获取到轨迹");
      }
    },
    // 选定时间,获取全区轨迹数据列表
    async getDataListAll() {
      // let date = new Date(this.$refs.historytime.value);
      // let str=formatDate(date,'yyyy-MM-dd');
      const params = {
        WorkDate: this.selectDay,
        ClientNo: this.CLIENT_NAME,
      };
      console.log(params);
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      const { data } = await this.$Http.get(
        "DataListCompany/GetWorkerAreaTrackGroup",
        { params }
      );
      loading.close();
      if (data.length != 0) {
        this.dataList = data;
        this.setTime.show = false;
        this.setSlider.max = this.dataList.length;
        this.drawPicture(13);
      } else {
        this.$message.error("未获取到轨迹");
      }
    },
    // 获取两个点的角度
    // getAngle (lng1, lat1, lng2, lat2) {
    //   const a = (90 - lat2) * Math.PI / 180
    //   const b = (90 - lat1) * Math.PI / 180
    //   const AOC_BOC = (lng2 - lng1) * Math.PI / 180
    //   const cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC)
    //   const sinc = Math.sqrt(1 - cosc * cosc)
    //   const sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc
    //   const A = Math.asin(sinA) * 180 / Math.PI
    //   let res = 0
    //   if (lng2 > lng1 && lat2 > lat1) res = A
    //   else if (lng2 > lng1 && lat2 < lat1) res = 180 - A
    //   else if (lng2 < lng1 && lat2 < lat1) res = 180 - A
    //   else if (lng2 < lng1 && lat2 > lat1) res = 360 + A
    //   else if (lng2 > lng1 && lat2 === lat1) res = 90
    //   else if (lng2 < lng1 && lat2 === lat1) res = 270
    //   else if (lng2 === lng1 && lat2 > lat1) res = 0
    //   else if (lng2 === lng1 && lat2 < lat1) res = 180
    //   return res
    // },
    // 打开数据列表
    openDataList() {
      this.getcarDataList();
      this.dataListDialog = true;
      this.getDataList();
    },
    //截屏保存成图片
    async savepic() {
      let canvas = document.querySelector(".track_the_playback");
      let that = this;
      html2canvas(canvas, {
        useCORS: true,
        tainttest: true,
        allowTaint: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight,
      }).then(function (canvas) {
        let type = "png";
        let imgData = canvas.toDataURL(type);
        // 照片格式处理
        let _fixType = function (type) {
          type = type.toLowerCase().replace(/jpg/i, "jpeg");
          let r = type.match(/png|jpeg|bmp|gif/)[0];
          return "image/" + r;
        };
        imgData = imgData.replace(_fixType(type), "image/octet-stream");
        let filename = "道路轨迹图片" + "." + type;
        that.saveFile(imgData, filename);
      });
    },
    saveFile(data, filename) {
      let save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;

      let event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },
    //画出整个轨迹
    drawPicture(mapZoom) {
      // this.map.clearOverlays()
      // this.hshmap.clear()
      var offSet = 0.0;
      var offRight = true;
      this.hshmap.clear();
      for (var i = 0; i < this.dataList.length; i++) {
        if (
          this.dataList[i][0].WorkerType == "环卫工人" &&
          this.linevalue.grcheck
        ) {
          switch (this.dataList[i][0].WorkerType) {
            case "环卫工人":
              offSet = this.linevalue.grvalue * 0.00001;
              offRight = true;
              break;
          }
          var temp = [];
          for (var Hg = 0; Hg < this.dataList[i].length; Hg++) {
            var changMax = this.dataList[i][0].changeMax;
            //第一个点
            if (Hg == 0) {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg + 2],
                  offSet,
                  offRight,
                  changMax
                )
              );
            }
            //最后一个点
            else if (Hg == this.dataList[i].length - 1) {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg - 2],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg],
                  offSet,
                  offRight,
                  changMax
                )
              );
            } else {
              temp.push(
                this.getCorrentVehicleInfoThree(
                  this.dataList[i][Hg - 1],
                  this.dataList[i][Hg],
                  this.dataList[i][Hg + 1],
                  offSet,
                  offRight,
                  changMax
                )
              );
            }
          }
          this.dataList[i] = temp;
        }
      }

      // for (var i = 0; i < this.dataList.length; i++) {

      //   if ((this.dataList[i][0].WorkerType == "环卫工人" && this.linevalue.grcheck)) {
      //     var pointArr = []
      //     for (const item1 of this.dataList[i]) {
      //       pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat))
      //     }
      //     let color = '#FF0000';
      //     var polyline = new BMap.Polyline(pointArr, {
      //       strokeColor: color,
      //       strokeWeight: this.linevalue.grvalue,
      //       strokeOpacity: 2
      //     });
      //     this.map.addOverlay(polyline);
      //     //  if(!this.hshmap.has(this.dataList[i][0].LICENSE_PLATE)){
      //     //     this.hshmap.set(this.dataList[i][0].LICENSE_PLATE,1);
      //     //     var point = new BMap.Point(this.dataList[i][0].NewLng, this.dataList[i][0].NewLat)
      //     //     var markerImage = new BMap.Icon(DirectionImg, new BMap.Size(50, 50))
      //     //     var marker = new BMap.Marker(point, { icon: markerImage })
      //     //     var label = new BMap.Label(this.dataList[i][0].LICENSE_PLATE+this.dataList[i][0].ORIENTATION_TIME, { offset: new BMap.Size(-10, 50) })
      //     //     marker.setLabel(label)
      //     //     this.map.addOverlay(marker)
      //     //   }
      //   }
      // }
      // }
      var data = [];
      var boundPoints = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if (
          this.dataList[i][0].WorkerType == "环卫工人" &&
          this.linevalue.grcheck
        ) {
          var pointArr = [];
          for (const item1 of this.dataList[i]) {
            // pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat))
            pointArr.push([item1.NewLng, item1.NewLat]);
            boundPoints.push(new BMap.Point(item1.NewLng, item1.NewLat));
          }
          data.push({
            geometry: {
              type: "LineString",
              coordinates: pointArr,
            },
          });
        }

        if (
          !this.hshmap.has(this.dataList[i][0].NAME) &&
          this.showcarnamechecked
        ) {
          this.hshmap.set(this.dataList[i][0].NAME, 1);
          var point = new BMap.Point(
            this.dataList[i][0].NewLng,
            this.dataList[i][0].NewLat
          );
          var markerImage = new BMap.Icon(DirectionImg, new BMap.Size(50, 50));
          var marker = new BMap.Marker(point, { icon: markerImage });
          var cc = `<div>${this.dataList[i][0].NAME}</div><div>${this.dataList[i][0].ORIENTATION_TIME}</div>`;
          var label = new BMap.Label(cc, { offset: new BMap.Size(-25, 30) });
          marker.setLabel(label);
          this.map.addOverlay(marker);
        }
      }
      if (this.MapV.dataSetWorkerLine) {
        this.MapV.dataSetWorkerLine.set(data);
      } else {
        this.MapV.dataSetWorkerLine = new mapv.DataSet(data);
        this.MapV.roadLayer = new mapv.baiduMapLayer(
          this.map,
          this.MapV.dataSetWorkerLine,
          {
            zIndex: 2,
            strokeStyle: "#912CEE",
            lineWidth: this.linevalue.grvalue,
            lineJoin: "round",
            draw: "simple",
          }
        );
      }

      // }
      // this.map.centerAndZoom(new BMap.Point(this.dataList[0][0].NewLng, this.dataList[0][0].NewLat), this.mapZoom)
      // this.map.centerAndZoom(new BMap.Polyline(boundPoints).getBounds().getCenter(), mapZoom);
      this.map.setViewport(boundPoints);
    },
    //进行轨迹点偏移
    getCorrentVehicleInfoThree(
      info1,
      info2,
      info3,
      distance,
      rightOff,
      changeMax
    ) {
      //两点之间的弧度
      var offAngel = 0;
      var info = new Object();
      var xiangxian = "";
      //两点经度差

      var offX = info3.NewLng * 1 - info1.NewLng * 1;
      //两点纬度差
      var offY = info3.NewLat * 1 - info1.NewLat * 1;
      //经度偏移
      var offLng = 0;

      //纬度偏移
      var offLat = 0;

      //偏移系数X
      var facX = 0;

      //偏移系数Y
      var facY = 0;

      if (info3.NewLng != info1.NewLng) {
        offAngel = Math.atan2(Math.abs(offX), Math.abs(offY));
      }

      //第一象限
      if (offX > 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 1;
      }
      //第二象限
      else if (offX < 0 && offY > 0) {
        xiangxian = "二象限";
        facX = -1;
        facY = -1;
      }
      //第三象限
      else if (offX < 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = -1;
      }
      //第四象限
      else if (offX > 0 && offY < 0) {
        xiangxian = "四象限";
        facX = 1;
        facY = 1;
      } else if (offX == 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 0;
      } else if (offX < 0 && offY == 0) {
        xiangxian = "二象限";

        facX = 0;
        facY = -1;
      } else if (offX == 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = 0;
      } else if (offX > 0 && offY == 0) {
        xiangxian = "四象限";
        facX = 0;
        facY = 1;
      }

      switch (changeMax) {
        case "X+":
          facY = -1;
          break;

        case "X-":
          facY = 1;
          break;

        case "X0":
          facY = -1;
          break;

        case "Y+":
          facX = 1;
          break;

        case "Y-":
          facX = -1;
          break;

        case "Y0":
          facX = 1;
          break;
      }

      facX = -1.0 * facX;
      facY = -1.0 * facY;
      //计算偏移
      offLng = distance * Math.cos(offAngel);
      offLat = distance * Math.sin(offAngel);

      info.NewLng = info2.NewLng * 1 + facX * offLng;
      info.NewLat = info2.NewLat * 1 + facY * offLat;
      info.ORIENTATION_TIME = info2.ORIENTATION_TIME;
      info.VID = info2.VID;
      info.WorkerType = info2.WorkerType;
      info.NAME = info2.NAME;
      info.RoadName = info2.RoadName;
      return info;
    },
    drawRoad() {
      var data = [];
      var dataText = [];
      var coordinates = [];
      for (var i = 0; i < this.Data.arrayVillageRoad.length; i++) {
        var item = this.Data.arrayVillageRoad[i];
        coordinates.push([item.LONGITUDE, item.LATITUDE]);
        if (i + 1 < this.Data.arrayVillageRoad.length) {
          if (item.NAME != this.Data.arrayVillageRoad[i + 1].NAME) {
            data.push({
              geometry: {
                type: "LineString",
                coordinates: coordinates,
              },
            });
            dataText.push({
              geometry: {
                type: "Point",
                coordinates: coordinates[parseInt(coordinates.length / 2)],
              },
              text: item.NAME,
            });
            coordinates = [];
          }
        } else {
          data.push({
            geometry: {
              type: "LineString",
              coordinates: coordinates,
            },
          });
          dataText.push({
            geometry: {
              type: "Point",
              coordinates: coordinates[parseInt(coordinates.length / 2)],
            },
            text: item.NAME,
          });
          // data.push({
          //   geometry: {
          //     type: 'LineString',
          //     coordinates: coordinates
          //   }
          // });
        }
      }
      var dataSet = new mapv.DataSet(data);
      var options = {
        zIndex: -1,
        strokeStyle: "rgba(100,100,100)",
        lineWidth: 3,
        lineJoin: "round",
        draw: "simple",
      };
      this.MapV.roadLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
      this.MapV.roadNameLayer = new mapv.baiduMapLayer(
        this.map,
        new mapv.DataSet(dataText),
        {
          draw: "text",
          size: 15,
          fillStyle: "rgba(18,58,99)",
          // avoid: true, // 开启文本标注避让
          textBaseline: "middle",
          offset: {
            // 文本便宜值
            x: 0,
            y: 13,
          },
        }
      );
      if (this.map.getZoom() > 16) {
        this.MapV.roadNameLayer.show();
      } else {
        this.MapV.roadNameLayer.hide();
      }
      this.map.centerAndZoom(
        new BMap.Point(
          this.Data.arrayVillageRoad[0].LONGITUDE,
          this.Data.arrayVillageRoad[0].LATITUDE
        ),
        this.mapZoom
      );
    },
    // 开始播放道路作业轨迹
    start() {
      this.dataListDialog = false;
      this.getDataList();
    },
    // 开始播放人员作业轨迹
    startworker() {
      this.dataListDialog = false;
      this.getDataListWorker();
    },
    // 开始播放全区作业轨迹
    startAll() {
      this.dataListDialog = false;
      this.getDataListAll();
    },
    // 清除轨迹
    clear() {
      this.stop();
      this.ary = [];
      this.dataCurrentIndex = 0;
      this.markerWithSlider.setPosition(new BMap.Point(0, 0));
      this.map.clearOverlays();
    },
  },
};
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .aroundtop {
    padding: 10px;
    background-color: #007acc;
    height: 100%;
    border-radius: 5px;
    &:first-child {
      padding-left: 10px;
      height: auto;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      .el-checkbox-show {
        background-color: #007acc;
        border-color: rgb(196, 105, 20);
      }
    }
    .aroundtopcontent {
      // margin-left: 2px;
      margin-top: 8px;
      background-color: #fff;
      border-radius: 5px;
      width: 100%;
      i {
        color: #007acc;
        font-size: 16px;
        font-weight: bold;
        height: 39px;
        line-height: 38px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
      }

      .input-number {
        margin-top: 8px;
        margin-right: 15px;
        font-size: 14px;
        width: 100%;
        text-align: center;
      }
      .el-checkbox-show {
        background-color: rgb(255, 255, 255);
        border-color: rgb(196, 105, 20);
        margin-right: 8px;
      }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
      width: 100%;
    }
    .person_legend {
      width: 550px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background-color: rgba(255, 0, 0, 0.9);
      padding: 5px 10px 0 10px;
      border-radius: 5px;
      h3 {
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #333;
        margin-bottom: 5px;
        i {
          float: right;
          cursor: pointer;
          &:before {
            color: #666;
          }
        }
      }
      p {
        // text-align: center;
        color: #333;
        float: left;
        width: 14%;
        margin-bottom: 8px;
        span {
          display: block;
          text-align: center;
          &:first-child {
            img {
              // background-size: 30px 30px;
              height: 30px;
            }
          }
        }
      }
    }
  }
}
.settingWindow {
  height: calc(~"100% - 32px");
}

.el-icon-speed {
  margin-left: 5px;
}
.buttonI {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.buttonII {
  color: #007acc;
  font-size: 14px;
  font-weight: bold;
  height: 22px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 7px 4px 7px;
  margin-left: 8px;
  border: 1px solid #007acc;
  border-radius: 4px;
}
</style>
